<template>
  <view class="choose_bank_card">
    <HeadNav page-name="选择银行卡" :borderType="true" :showNav="true" />
    <view>
      <!-- 温馨提示 -->
      <!-- <view class="choose_card_section_4">
        <image
          src="https://image.qqpyyds.com/mpAppImg/icon/tips1_icon.png"
          mode="aspectFill"
          class="choose_card_image_7"
        />
        <text class="choose_card_text_3">温馨提示：长按银行卡可管理银行卡</text> -->
      </view>
      <!-- 已添加卡信息 -->
      <scroll-view class="bank_card" v-if="bankList.length>0" @scrolltolower="scrolltolowerFn" :scroll-anchoring="true" :scroll-y="true">
        <ul class="bank_list_ul">
          <li class="bank_list_li" v-for="(bank, index) in bankList" :key="index">
            <img class="bank_bgImg" :src="bank.backgroundUrl || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/backgroundUrl_mr.png'" alt="">
            <div class="bank_list_li_t">
              <div class="bank_list_li_t_l">
                <div class="logo_box">
                  <img class="logo_img" v-if="bank.bankLogo" :src="bank.bankLogo" alt="">
                </div>
                <span>{{bank.issuer}}</span>
              </div>
            </div>
            <div class="card_mun_box">{{bank.cardNumber}}</div>
          </li>
        </ul>
        <div class="no_more" v-if="notDataType">没有更多了~</div>
         <!-- 添加银行卡 -->
        <view
          class="justify-center choose_card_button"
          @click="navigateTo({url: '/pagesA/wallet/addBankCard'})"
        >
          <image
            src="https://image.qqpyyds.com/mpAppImg/icon/tianjia1_icon.png"
            class="choose_card_image_9"
          />
          <text class="choose_card_text_11">添加银行卡</text>
        </view>
      </scroll-view>
  </view>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";;
import Money from '@/api/money.js'
export default {
  name: "chooseBankCard",
  components: {
    HeadNav,
  },
  data() {
    return {
      bankList: [],
      notDataType: false,
      paramsPage: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  onLoad () {
  },
  onShow () {
    this.getBankListFn()
  },
  methods: {
    scrolltolowerFn () {
      ++this.paramsPage.currentPage
      this.getBankListFn()
    },
    getBankListFn () {
      let params = {
        ...this.paramsPage
      }
      Money.getBankList(params).then(res => {
        if (res.code == 200) {
          if (res.data.records.length>0) {
            if (this.bankList.length>0) {
              this.bankList = this.bankList.concat(res.data.records)
            } else {
              this.bankList = res.data.records
            }
          }
          if (res.data.records.length<this.paramsPage.pageSize) {
            this.notDataType = true
          } else {
            this.notDataType = false
          }
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.choose_bank_card {
  height: 100vh;
  background: #f2f3f5;
}
// 提示
.choose_card_section_4 {
  color: rgb(250, 171, 12);
  font-size: 20rpx;
  white-space: nowrap;
  background-color: rgb(255, 251, 232);
  height: 40rpx;
  padding-left: 32rpx;
  display: flex;
  align-items: center;
  .choose_card_image_7 {
    width: 32rpx;
    height: 32rpx;
    margin: 0;
  }
  .choose_card_text_3 {
    margin-left: 8rpx;
  }
}

// 已添加的银行卡
.bank_card {
  width: 100%;
  height: calc(100vh - 60px);
}

// 添加银行卡按钮
.choose_card_button {
  margin: 28rpx 32rpx 0;
  padding: 44rpx 0;
  color: #969799;
  font-size: 28rpx;
  white-space: nowrap;
  background-color: rgb(255, 255, 255);
  border-radius: 16rpx;
  .choose_card_image_9 {
    width: 38rpx;
    height: 38rpx;
    margin-right: 13rpx;
  }
}
</style>
